
import styled from 'styled-components';
import React, { CSSProperties, useState, useEffect, useCallback } from 'react';
import { TableOutlined, DeleteOutlined, InfoCircleOutlined, PartitionOutlined, ProfileOutlined } from '@ant-design/icons';

import { SimpleVTable, IconsHeader } from '../../../../components';
import { DataSource, DataSourceDomainConnector, MetaDataObjectProperty } from '../../../../services';
import { dsFind, mergeQueryCondition, metaFindClass } from '@/services/local';

export interface DataValuesObjectValuesPanelProps {
    style?: CSSProperties;
    dataSource: DataSource;
    objectIdentifier: string;
}

export const DataValuesObjectValuesPanel: React.FC<DataValuesObjectValuesPanelProps> = (props) => {

    const [action, setAction] = useState<string>('属性');

    const [connector, setConnector] = useState<DataSourceDomainConnector>(new DataSourceDomainConnector(props.dataSource));

    const [columns, setColumns] = useState<Array<any>>([]);

    const [data, setData] = useState([]);

    useEffect(() => {
        setConnector(new DataSourceDomainConnector(props.dataSource));
    }, [props.dataSource]);

    const refresh = useCallback(async (objIdentifier) => {
        //获取到元数据
        let clazz: any = await metaFindClass(objIdentifier);
        if (clazz && clazz.attributes) {
            let columns = clazz.attributes.map((attr, index) => {
                return attr;
            });
            setColumns(columns);
            //
            const { total, data } = await dsFind(props.dataSource.id, objIdentifier, {
                page: 1,
                page_size: 10
            });
            setData(data);
        }

    }, [connector]);

    useEffect(() => {
        refresh(props.objectIdentifier);
    }, [props.objectIdentifier, refresh]);

    return (
        <Container style={props.style}>
            <Header>
                <IconsHeader
                    activeKey={action}
                    itemSize={30}
                    leftItems={[
                        {
                            key: '属性',
                            icon: <PartitionOutlined />,
                        },
                        {
                            key: '属性',
                            divider: true,
                        },
                        {
                            key: '归属',
                            icon: <PartitionOutlined />,
                        },
                        {
                            key: '属性',
                            divider: true,
                        },
                        {
                            key: '数据',
                            icon: <ProfileOutlined />,
                            disabled: true,
                        }
                    ]}
                    rightItems={[
                        {
                            key: '信息',
                            label: '信息',
                            icon: <InfoCircleOutlined />,
                        },
                        {
                            key: '删除',
                            label: '删除',
                            icon: <DeleteOutlined />,
                            isAction: true,
                        }
                    ]}
                    onChange={async (key: string, isAction?: boolean) => {
                        if (isAction) {
                            //删除
                        } else {
                            setAction(key);
                        }
                    }}></IconsHeader>
            </Header>
            <TableContainer>
                <SimpleVTable
                    columns={columns.map((item, index) => {
                        return {
                            title: item.title,
                            name: item.name,
                        };
                    })}
                    data={data.map((item, index) => {
                        return columns.map((col, index) => {
                            return item[col.name];
                        })
                    })}
                ></SimpleVTable>
            </TableContainer>
        </Container>
    );
}


const Container = styled.div`
    width: 100%;
    height: 100;
    display: flex;
    flex-direction: column;
`;

const Header = styled.div`
    height: 38px;
    width: 100%;
    background-color: #FFFFFF;
    border-bottom: 1px solid #DEDEDE;
    display: flex;
`;
const TableContainer = styled.div`
    flex: 1;
    width: 100%;
`;
